<template>
  <div class="register">
    <el-row>
      <el-col :span="8" :xs="0"></el-col>
      <el-col class="register-center" :span="8" :xs="24">
        <el-form class="register-form" ref="registerDom" :model="registerForm" :rules="registerRules">
          <h3>注册账号</h3>
          <el-form-item prop="username">
            <el-input v-model="registerForm.username" :prefix-icon="User" placeholder="请输入用户名" clearable></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input v-model.trim="registerForm.phone" :prefix-icon="Cellphone" autocomplete="off" maxlength="11" placeholder="请输入手机号码" show-word-limit type="text">
            </el-input>
          </el-form-item>
          <el-form-item prop="verifycode">
            <div class="register-verifycode">
              <el-input class="input-verifycode" v-model="registerForm.verifycode" :prefix-icon="ChatDotRound" placeholder="请输入手机验证码" clearable></el-input>
              <el-button class="phone-verifycode" :disabled="isVerify" type="primary" @click="handleverifycode">{{ verifycode }}</el-button>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="registerForm.password" :prefix-icon="Lock" type="password" placeholder="请输入用户密码" clearable show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="register-btn" type="primary" size="default" :loading="loading" @click="handleClick">注  册</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8" :xs="0"></el-col>
    </el-row>
  </div>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { User, Cellphone, ChatDotRound, Lock } from '@element-plus/icons-vue'
import { validateUsername, validatePassword, validatePhone } from '@/utils'

const $router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const isVerify = ref(false)
const verifycode = ref('获取验证码')

const registerForm = ref({
  username: '',
  phone: '',
  verifycode: '',
  password: '',
})

// 自定义正则校验
const registerDom = ref()
const registerRules = {
  username: [
    {validator: validatorUsername, trigger: 'change'},
  ],
  phone: [
    {validator: validatorPhone, trigger: 'change'},
  ],
  verifycode: [
    {required: true, message: '请输入手机验证码！', trigger: 'change'},
    {length: 6, message: '验证码长度为 6 位！', trigger: 'change'},
  ],
  password: [
    {validator: validatorPassword, trigger: 'change'},
  ],
}

function validatorUsername(rule, value, callback) {
  if (validateUsername(value)) {
    callback()
  } else {
    callback(new Error('用户名长度最短 5 位，最长 9 位！'))
  }
}

function validatorPhone(rule, value, callback) {
  if (validatePhone(value)) {
    callback()
  } else {
    callback(new Error('手机号码 11 位！'))
  }
}

function validatorPassword(rule, value, callback) {
  if (validatePassword(value)) {
    callback()
  } else {
    callback(new Error('用户密码长度最短 6 位，最长 12 位！'))
  }
}

function handleverifycode() {
  if (!validatePhone(registerForm.value.phone)) {
    ElMessage({
      type: 'error',
      grouping: true,
      message: '手机号码不正确！'
    })
    return
  }

  let n = 60
  isVerify.value = true
  let timer = setInterval(() => {
    if (n > 0) {
      n--
      verifycode.value = `重新获取(${n}s)`
    } else {
      isVerify.value = false
      verifycode.value = '获取验证码'
      clearInterval(timer)
    }
  }, 1000)
}

function handleClick() {
  
}
</script>

<style scoped lang="scss">
.register {
  width: 100%;
  height: 100%;

  .register-center {
    display: flex;
    justify-content: center;
    height: 100vh;
    background: #fff;

    .register-form {
      position: relative;
      padding: 30px 35px;
      top: 25vh;
      width: 320px;
      height: 300px;

      h3 {
        margin-bottom: 25px;
        color: #307DE8;
        font-size: 25px;
        text-align: center;
      }

      .register-verifycode {
        display: flex;
        justify-content: space-around;
        
        .input-verifycode {
          width: 170px;
        }

        .phone-verifycode {
          width: 70px;
          height: 31px;
          margin-left: 10px;
          font-size: 10px;
          color: #fff;
          border-radius: 3px;
        }
      }

      .register-btn {
        width: 100%;
      }
    }
  }
}
</style>
